<template>
    <ElTable class="list-table is-border" :="$attrs" height="720" :span-method="spanMethod" border :data="list">
        <ElTableColumn label="客户名称" prop="khmc" width="150"></ElTableColumn>
        <ElTableColumn label="拓客类型" prop="tklxName" width="100"></ElTableColumn>
        <ElTableColumn label="拓客渠道" prop="tkqdName" width="120"></ElTableColumn>
        <ElTableColumn label="客户首次合作时间" prop="khschzsj" width="150" align="center"></ElTableColumn>
        <ElTableColumn label="店铺平台" prop="dpptName" width="100" align="center"></ElTableColumn>
        <ElTableColumn label="店铺名称" prop="dpmc" width="100" align="center"></ElTableColumn>
        <ElTableColumn label="店铺链接" prop="dplj" width="100">
            <template #default="{ row }">
                <div class="ellipsis-cell">{{ row.dplj }}</div>
            </template>
        </ElTableColumn>
        <ElTableColumn label="店铺类目" prop="dplmName" width="175" align="center"></ElTableColumn>
        <ElTableColumn label="难易等级" prop="nydjName" width="100" align="center"></ElTableColumn>
        <ElTableColumn label="剔除退款" prop="tctkName" width="100" align="center"></ElTableColumn>
        <ElTableColumn label="首次合作时间" prop="dpschzsj" width="120"></ElTableColumn>
        <ElTableColumn label="合作状态" prop="dphzztName" width="100" align="center"></ElTableColumn>
        <ElTableColumn label="对接渠道" prop="djqdName" width="100" align="center"></ElTableColumn>
        <ElTableColumn label="配合度" prop="phdName" width="109"></ElTableColumn>
        <ElTableColumn label="业务对接人" prop="ywdjrName" width="100" align="center"></ElTableColumn>
        <ElTableColumn label="续费专员" prop="xfzyName" width="100" align="center"></ElTableColumn>
        <ElTableColumn label="店铺备注" prop="dpbz" width="100">
            <template #default="{ row }">
                <div class="ellipsis-cell">{{ row.dpbz }}</div>
            </template>
        </ElTableColumn>
        <ElTableColumn prop="_action" label="客户操作" fixed="right" :min-width="90" header-align="center" align="center">
            <template #default="{ row }">
                <ElButton type="primary" link @click="$emit('edit-custom', row)">编辑</ElButton>
                <ElButton type="primary" link @click="$emit('open-fp', row)">发票</ElButton>
            </template>
        </ElTableColumn>
    </ElTable>
</template>

<script setup lang="ts">
import { ElTableColumn } from 'element-plus';
import { ref, computed, onMounted } from 'vue'
import { addRowAndColSpan } from '@/utils/zeo'

interface Props {
    data?: any[],
}

const props = withDefaults(defineProps<Props>(), {
    data: () => []
})

const list = computed(() => {
    let l = []
    // child1就是一行客户数据,index就是0、1、2依次
    props.data.forEach((child1, index1) => {
        // 取店铺数据
        const shopList = child1.customerShopList;
        shopList.forEach((child2, index2) => {
            l.push({
                ...child1,
                ...child2,
            })
        })
    });

    l = addRowAndColSpan(l, 'customerId', 'rowspan1', 'colspan1');
    return l;
})

const level1 = [
    'customerId', 'zxkhName', 'khmc', 'tklxName', 'tkqdName', 'khschzsj',
    , 'glkhName', 'glgxName', 'khhzztName', 'khxxbz', '_action'
]

const spanMethod = ({ row, column }) => {
    if (level1.includes(column.property)) {
        return {
            rowspan: row.rowspan1,
            colspan: row.colspan1
        }
    }
}

onMounted(() => {
    /*
    setTimeout(() => {
        console.log(props.data);
    }, 2000); 
    */
})

</script>

<style scoped lang="scss">
.ellipsis-cell {
    white-space: nowrap;
    /* 禁止换行 */
    overflow: hidden;
    /* 隐藏超出部分 */
    text-overflow: ellipsis;
    /* 显示省略号 */
    max-width: 200px;
    /* 设置一个最大宽度，根据需要调整 */
}




// .list-table.is-border {
//   border: 12px solid red; /* 外边框颜色 */
//   border-radius: 4px;       /* 边框圆角 */
// }

// /* 单元格边框（水平和垂直） */
// .list-table.is-border td.el-table__cell,
// .list-table.is-border th.el-table__cell {
//   border-right: 10px solid red;  /* 右侧边框 */
//   border-bottom: 10px solid red; /* 底部边框 */
// }


</style>